<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <title>飞马智监控</title>
    <link rel="stylesheet" href="/css/vendor/cmp-controls.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="/css/ecalendar.css"/>
    <link rel="stylesheet" type="text/css" href="/css/vendor/cloud-play-monitor.css"/>
</head>
<body>

<!-- 顶部状态栏 -->
<div class="status-bar">
    <img style="position: absolute; left: 64px; top: 4px; max-height: 58px; max-width: 58px;"
         src="/images/cloudplay/monitor_asset/smart_monitor.png">
    <section style="position: absolute; left: 140px; top: 6px; font-weight: bolder;">智监控</section>
    <section
        style="position: absolute; left: 140px; bottom: 4px; font-family: PingFangSC-Light, sans-serif; font-size: 0.8em;">
        SmartMonitor
    </section>

    <div class="user-info-container">
        <img id="user-image" onClick="clickUserImage(this)"
             src="<?= $user['icon_url'] ?>">
        <section id="user-name" onClick="clickUserName(this)"><?= $user['nickname'] ?></section>
    </div>

    <div id="mission-status-container">
        <div class="mission-status-item-container" style="width: 120px;" id="top-block-total" onClick="clickShowMissions(this, 'total')">
            <section class="mission-item-count" id="task_flytotal">0</section>
            <section class="mission-status-item-text">任务总数</section>
        </div>
        <div class="mission-status-item-container" id="top-block-finished" onClick="clickShowMissions(this, 'finished')">
            <section class="mission-item-count" id="task_fly">0</section>
            <section class="mission-status-item-text"><img class="mission-status-item-icon"
                                                           src="/images/cloudplay/monitor_asset/mission_finished.png"> 已飞过</section>
        </div>
        <div class="mission-status-item-container" id="top-block-stanby" onClick="clickShowMissions(this, 'stanby')">
            <section class="mission-item-count" id="task_unfly">0</section>
            <section class="mission-status-item-text"><img class="mission-status-item-icon"
                                                           src="/images/cloudplay/monitor_asset/mission_stanby.png"> 未飞过</section>
        </div>
        <div class="mission-status-item-container" id="top-block-flying" onClick="clickShowMissions(this, 'flying')">
            <section class="mission-item-count" id="task_flying">0</section>
            <section class="mission-status-item-text"><img class="mission-status-item-icon"
                                                           src="/images/cloudplay/monitor_asset/mission_flying.png"> 飞行中</section>
        </div>
    </div>
</div>

<!-- 地图显示块 -->
<div style="position: fixed; top: 54px; left: 0px; right: 0px; bottom: 0px;">
    <div id="map-container" style="position: relative; width: 100%; height: 100%;"></div>
</div>

<!--信息菜单开关-->
<div class="info-toggle-container">
    <div onClick="clickInfoMenuToggle(this)" class="info-toggle">
        <img id="info-toggle-icon" src="/images/cloudplay/monitor_asset/info_toggle.png"/>
    </div>
</div>

<!-- 信息菜单 -->
<div id="info-container">
    <div class="info-title-container">
        <div class="info-seperate-line"></div>
        <div onClick="clickInfoLeftItem()" class="info-left-item">
            <section id="info-title-left" class="info-title info-selected-color">测区列表</section>
            <div id="info-title-bottom-line-left" class="info-seleted-bottom-line-container">
                <div class="info-seleted-bottom-line"></div>
            </div>
        </div>
        <div onClick="clickInfoRightItem()" class="info-right-item">
            <section id="info-title-right" class="info-title">统计信息</section>
            <div id="info-title-bottom-line-right" class="info-seleted-bottom-line-container" style="display: none;">
                <div class="info-seleted-bottom-line"></div>
            </div>
        </div>
    </div>

    <div id="info-mission-menu-container">
        <div class="info-filter-container">
            <div style="width: 100%; height: 44px; position: relative; margin-bottom: 18px;">
                <input name="info-area" class="info-area-input" id="project-search-name" placeholder="测区关键字搜索" type="text"/>
                <div class="info-search-btn" onClick="searchMission()">
                    <div
                        style="width: 80px; height: 52px; display: table-cell;  text-align: center; vertical-align: middle;">
                        <img src="/images/cloudplay/monitor_asset/search.png" style=" max-width: 34px; height: 34px;">
                    </div>
                </div>
            </div>
            <div class="info-filter-selection-container">
                任务 :
                <input type="radio" name="filter-mission" value="exist" id="filter-mission-exist" checked>
                <label for="filter-mission-exist" style="margin-left: 10px;">有</label>
                <input type="radio" name="filter-mission" value="none" id="filter-mission-none">
                <label for="filter-mission-none" style="margin-left: 33px;">无</label>
            </div>
            <div class="info-filter-selection-container">
                最近 :
                <input type="radio" name="filter-duration-from-now" value="all" id="filter-all" checked>
                <label for="filter-all" style="margin-left: 10px;">全部</label>
                <input type="radio" name="filter-duration-from-now" value="one-week" id="filter-one-week">
                <label for="filter-one-week">一周</label>
                <input type="radio" name="filter-duration-from-now" value="one-month" id="filter-one-month">
                <label for="filter-one-month">一月</label>
            </div>
            <div class="info-filter-selection-container">
                <div class="info-filter-selection-title">时间段 :</div>

                <div class="info-filter-selection-item" id="time_start">开始
                    <img class="info-filter-toggle-icon" src="/images/cloudplay/monitor_asset/filter_toggle.png"/>
                </div>
                <div class="info-filter-selection-item" id="time_end">今天
                    <img class="info-filter-toggle-icon" src="/images/cloudplay/monitor_asset/filter_toggle.png"/>
                </div>
            </div>
            <div class="info-filter-selection-container" style="display: none;">
                <div class="info-filter-selection-title">地区 :</div>
                <div class="info-filter-selection-item"><span id="info-filter-province">请选择</span>
                    <img class="info-filter-toggle-icon" src="/images/cloudplay/monitor_asset/filter_toggle.png"/>
                    <!-- 省市 -->
                    <select id="info-filter-province-select" onChange="infoFilterProvinceChanged(this)">
                        <option value="0">请选择</option>
                        <?php foreach ($cityList as $city): ?>
                            <option id="city_<?= $city['id'] ?>" value="<?= $city['id'] ?>" lng="<?= $city['lng'] ?>"
                                    lat="<?= $city['lat'] ?>"><?= $city['name'] ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="info-filter-selection-item"><span id="info-filter-city">请选择</span>
                    <img class="info-filter-toggle-icon" src="/images/cloudplay/monitor_asset/filter_toggle.png"/>
                    <!-- 市县 -->
                    <select id="info-filter-city-select" onChange="infoFilterCityChanged(this)">
                    </select>
                </div>
            </div>
        </div>

        <div id="info-mission-list-container">
            <div class="info-seperate-line" style="top: 0px;"></div>

            <!-- 这里动态添加菜单的任务信息 -->
        </div>
    </div>

    <div id="info-statistics-container" style="display: none;">
        <div class="info-statistics">
            <ul>
                <li><label class="name">测区总数</label><label class="value" id="info-block-list">0</label></li>
                <li><label class="name">任务总数</label><label class="value" id="info-task-list">0</label></li>
                <li><label class="name">总架次</label><label class="value" id="info-fly-count">0</label></li>
                <li><label class="name">总里程</label><label class="value" id="info-fly-mileages">0<label style="font-size: 0.56em;"> 公里</label></label></li>
            </ul>
        </div>
        <div class="mission-filter">
            <input type="radio" name="mission-filter" value="all" id="mission-filter-all" checked>
            <label for="mission-filter-all">全部</label>
            <input type="radio" name="mission-filter" value="my-drone" id="mission-filter-my-drone">
            <label for="mission-filter-my-drone" style="margin-left: 10px;">我的飞机</label>
            <input type="radio" name="mission-filter" value="mission-drone" id="mission-filter-mission-drone">
            <label for="mission-filter-mission-drone" style="margin-left: 10px;">任务飞机</label>

            <section class='info-seperate-line'></section>
        </div>

        <!-- 在这里动态插入飞机信息-->
    </div>
</div>

<!-- 测区信息 -->
<div id="mission-info-map"  style="display: none;visibility:hidden">
    <div class="zone-info-container">
        <div class="title">
            <section style="margin-left: 14px;" id="task-name">mission1</section>
            <div class="close-btn" onclick="closeInfoWindow()"></div>
        </div>

        <div class="zone-info-box">
            <section class="project-name" id="block-name">工程名称-测区名称</section>
            <img id="zone-info-drone-icon" src="/images/cloudplay/monitor_asset/drone_f200.png"></img>

            <div class="zone-info-project-detail">
                <ul class="zone-info-project-item-name-left">
                    <li>相机类型</li>
                    <li>比例尺</li>
                    <li>分辨率</li>
                    <li>航向重叠</li>
                    <li>旁向重叠</li>
                    <li>航线间距</li>
                    <li>拍照间距</li>
                    <li>默认空速</li>
                    <li>飞行高度</li>
                    <li>预计面积</li>
                    <li>预计时间</li>
                    <li>预计里程</li>
                </ul>
                <ul class="zone-info-project-item-value-left">
                    <li id="block-camera-type"></li>
                    <li id="block-work-scale"></li>
                    <li><span id="block-gsd"></span>cm/px</li>
                    <li id="block-longitudinal-overlap"></li>
                    <li id="block-lateral-overlap"></li>
                    <li><span id="block-flight-interval"></span>m</li>
                    <li><span id="block-take-pic-interval"></span>m</li>
                    <li><span id="block-default-air-speed"></span>m/s</li>
                    <li><span id="block-flight-relative-altitude"></span>m</li>
                    <li><span id="block-work-area"></span>km&sup2;</li>
                    <li><span id="block-work-time"></span>min</li>
                    <li><span id="task-total-mileage"></span>km</li>
                </ul>
                <ul class="zone-info-project-item-name-right">
                    <li>海拔高度</li>
                    <li></li>
                    <li>最高点</li>
                    <li>分辨率</li>
                    <li>海拔高度</li>
                    <li>航向重叠</li>
                    <li>旁向重叠</li>
                    <li></li>
                    <li>最低点</li>
                    <li>分辨率</li>
                    <li>海拔高度</li>
                </ul>
                <ul class="zone-info-project-item-value-right">
                    <li><span id="block-flight-altitude"></span>m</li>
                    <li></li>
                    <li style="position: relative; left: -20px;">······</li>
                    <li><span id="block-high-gsd"></span>cm</li>
                    <li><span id="block-survey-highest-altitude"></span>m</li>
                    <li id="block-high-longitudinal-overlap"></li>
                    <li id="block-high-lateral-overlap"></li>
                    <li></li>
                    <li style="position: relative; left: -20px;">······</li>
                    <li><span id="block-low-gsd"></span>cm/px</li>
                    <li><span id="block-survey-lowest-altitude"></span>m</li>
                </ul>
            </div>

            <section class="flight-record">飞行记录</section>
            <div id="zone-info-flight-record-list-container"></div>
        </div>
    </div>
</div>
<div id="value_user_id" style="display: none;"><?= $user['id'] ?></div>
</body>

<!-- 加载JS脚本 -->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/Ecalendar.jquery.min.js"></script>
<script src="/js/vendor/cmp-controls.js"></script>
<script src="/js/vendor/common.js"></script>
{% include 'template/baseMap.volt' %}{% include 'template/baseMapKey.volt' %}
<script type="text/javascript" src="/js/vendor/transform.js"></script>
<script type="text/javascript" src="/js/vendor/google-map-manager.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-common.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-monitor.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-monitor-data.js"></script>
</html>



